<template>
  <div class="register-wrapper">
    <!-- 注册页容器 -->
    <div class="register-box">
      <!-- 宣传图片区域 -->
      <div class="promo-image">
        <img src="@/assets/picture/222.png" alt="宣传图" />
      </div>
      <!-- 注册表单区域 -->
      <div class="register-page">
        <h2>注册</h2>
        <form @submit.prevent="handleRegister">
          <div class="form-group">
            <label for="username">真实姓名</label>
            <input type="text" v-model="username" id="username" required />
          </div>
          <div class="form-group">
            <label for="phone_num">手机号</label>
            <input type="text" v-model="phone_num" id="phone_num" required />
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" v-model="password" id="password" required />
          </div>
          <div class="form-group">
            <label for="confirmPassword">确认密码</label>
            <input type="password" v-model="confirmPassword" id="confirmPassword" required />
          </div>
<div style="display:flex">
          <div class="form-group" style="width: 50%;">
            <label for="user_type">用户身份</label>
            <select style="margin-right: 30px;" v-model="user_type" id="user_type" required>
              <option value="student">学生</option>
              <option value="teacher">教师</option>
            </select>
          </div>

          <!-- 条件渲染的学号字段 -->
          <div style="width: 50%;" v-if="user_type === 'student'" class="form-group">
            <label style="flex-basis: 30px;" for="stu_number">学号</label>
            <input style="width: 70%;" type="text" v-model="stu_number" id="stu_number" />
          </div>
</div>
          <button type="submit">注册</button>
        </form>
        <p>已有账号？<router-link to="/login">去登录</router-link></p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import api from '@/services/api';
import { ElMessage } from 'element-plus';

export default {
  name: 'RegisterPage',
  setup() {
    const username = ref('');
    const phone_num = ref('');
    const password = ref('');
    const confirmPassword = ref('');
    const user_type = ref('student'); // 默认选择学生
    const stu_number = ref('');
    const router = useRouter();

    const handleRegister = async () => {
    if (!/^\d{11}$/.test(phone_num.value)) {
      ElMessage.error('请输入11位数字的手机号');
      return;
    }

    // 学号验证（当用户类型是学生时）
    if (user_type.value === 'student' && !/^\d{10}$/.test(stu_number.value)) {
      ElMessage.error('学号必须是10位数字');
      return;
    }
      if (password.value !== confirmPassword.value) {
        ElMessage.error('密码不匹配');
        return;
      }

      try {
        const response = await api.post('/youxich/user/register', {
          phone_num: phone_num.value,
          password: password.value,
          user_type: user_type.value,
          stu_number: user_type.value === 'student' ? stu_number.value : undefined,
          username: username.value
        });

        if (response.data && response.data.status === 1) {
          router.push('/login');
          ElMessage.success('注册成功！');
        } else {
          ElMessage.error(response.data.msg || '注册失败，请重试');
        }
      } catch (error) {
        console.error('注册失败:', error);
        ElMessage.error('注册失败，请重试');
      }
    };

    return {
      username,
      phone_num,
      password,
      confirmPassword,
      user_type,
      stu_number,
      handleRegister
    };
  }
};
</script>

<style scoped>
/* 外层容器，确保页面中央悬挂 */
.register-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 85vh;
  background-image: url('https://www.westlake.edu.cn/academics/library/ylfw/202212/W020230207337959103579.jpg');
}

/* 注册页的整体盒子，包含图片和表单，确保高度一致 */
.register-box {
  display: flex;
  max-width: 800px;
  width: 100%;
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 0 12px rgba(66, 185, 131, 0.6); /* 边缘发光效果 */
  overflow: hidden;
  animation: floatUpAndDown 3s ease-in-out infinite; /* 上下浮动动画 */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.register-box:hover {
  animation-play-state: paused; /* 鼠标悬停时停止动画 */
  box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.8); /* 鼠标悬停时增加发光效果 */
}

/* 上下浮动动画 */
@keyframes floatUpAndDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* 浮动高度 */
  }
}

/* 宣传图片区域 */
.promo-image {
  flex: 1;
  background-color: #78889d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.promo-image img {
max-width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 注册表单区域 */
.register-page {
  flex: 1;
  padding: 20px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 标题样式 */
.register-page h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333333;
  font-size: 24px;
  font-weight: bold;
}

/* 表单组 */
.form-group {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

/* 标签样式 */
.form-group label {
  flex-basis: 60px; /* 固定标签宽度，确保一致 */
  color: #555555;
  font-size: 14px;
  margin-right: 10px;
}

/* 输入框和选择框样式 */
.form-group input,
.form-group select {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  font-size: 14px;
  transition: all 0.3s ease; /* 添加动画过渡 */
}

.form-group input:focus,
.form-group select:focus {
  border-color: #42b983;
  outline: none;
  transform: scale(1.02); /* 获取焦点时的放大效果 */
  box-shadow: 0 0 5px rgba(66, 185, 131, 0.5); /* 阴影效果 */
}

/* 提交按钮样式 */
button {
  width: 100%;
  padding: 12px;
  background-color: #143874;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s; /* 添加按钮悬停动画 */
}

button:hover {
  background-color: #2d579c;
}

/* 链接样式 */
.register-page p {
  text-align: center;
  margin-top: 20px;
  color: #666666;
  font-size: 14px;
}

.register-page a {
  color: #2d579c;
  text-decoration: none;
  font-weight: bold;
}

.register-page a:hover {
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .register-box {
    flex-direction: column;
    max-width: 90%;
    height: auto; /* 高度改为自适应以适应小屏幕 */
    animation: none; /* 移除浮动动画 */
    box-shadow: 0 0 10px rgba(66, 185, 131, 0.6);
  }

  .promo-image {
    display: none; /* 隐藏图片区域，保持在小屏幕上表单更简洁 */
  }
}

@media (max-width: 480px) {
  .register-page {
    padding: 20px;
  }

  .register-page h2 {
    font-size: 20px;
  }

  button {
    font-size: 14px;
    padding: 10px;
  }
}
</style>